<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="wangEditor/release/wangEditor.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>wangEditor 编辑器</title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }

        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
    </style>
</head>
<body>

<div style="margin: 0 auto; width: 90%">
    <div id="div1" style="margin-top: 15px;padding: 8px 20px;" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
    <div id="div2" class="text" style="min-height: 600px"> <!--可使用 min-height 实现编辑区域自动增加高度-->

    </div>

   <div style="text-align: center"> <button type="button" id="submit" class="layui-btn layui-btn-normal">提交</button>
       <button type="button" id="restart" class="layui-btn">清空</button></div>
</div>











<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="wangEditor/release/wangEditor.js"></script>

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器

    var httpurl = "http://localhost:8080";

    editor.customConfig.uploadImgServer = httpurl + "/editor/upload";
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
    editor.customConfig.pasteFilterStyle = false;
    editor.customConfig.withCredentials = true;
    editor.customConfig.colors = [
        '#000000',
        '#7b5ba1',
        '#FF3399',
        '#f9963b',
        '#ffffff',
        '#FF0000',
        '#0000FF',
        '#00FF00',
        '#FF00FF',
        '#C0C0C0',
        '#FFFF00',
        '#728CFF',
        '#00FFFF',
    ];

    editor.customConfig.uploadImgHooks = {
        success: function (xhr, editor, result) {
            layer.msg("图片上传成功", {icon: 6});
        },
        fail: function (xhr, editor, result) {
            layer.msg("返回数据有误", {icon: 5});
        },


    };


    editor.customConfig.linkImgCallback = function (url) {
        console.log(url) // url 即插入图片的地址
    }


    editor.create();

    layui.use(['layer', 'jquery'], function () {
        var $ = layui.jquery,
            layer = layui.layer;

        document.getElementById('submit').addEventListener('click', function () {
            // 读取 html
            var html = editor.txt.html();
            $.post(httpurl + "/editor/save", {'value': html}, function (res) {
                if (res != null) {
                    layer.msg("提交成功", {icon: 6}, function () {

                        layer.open({
                            type: 1
                            ,
                            title: false //不显示标题栏
                            ,
                            closeBtn: false
                            ,
                            area: '300px;'
                            ,
                            shade: 0.8
                            ,
                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,
                            btn: ['火速围观', '残忍拒绝']
                            ,
                            btnAlign: 'c'
                            ,
                            moveType: 1 //拖拽模式，0或者1
                            ,
                            content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">新文章：' + res.toString() + '</div>'
                            ,
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    href: httpurl + '/editor/fileshow?myfile=' + res.toString()
                                    , target: '_blank'
                                });
                            }
                        });
                    });
                } else {
                    layer.msg("提交失败", {icon: 5});
                }
            });
        }, false);

        document.getElementById('restart').addEventListener('click', function () {
            editor.txt.clear();
        }, false);

    });


</script>

</body>
</html>
